@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">

<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
        <ol class="am-breadcrumb">
            <li style="font-weight: 600;"><a href="/home/member/index">首页</a></li>
            <li style="font-weight: 600;"><a href="">供应链订单</a></li>
        </ol>
    </div>
    <div>
        <div class="am-cf cart-panel" id="">
            <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
                <!-- <ul class="am-tabs-nav am-cf">
                    <li class="am-active"><a href="" v-on:click="class0(null)">全部</a></li>
                    <li><a href="" v-on:click="class0(1)">待发货</a></li>
                    <li><a href="" v-on:click="class0(2)">已发货</a></li>
                    <li><a href="" v-on:click="class0(3)">已完成</a></li>
                </ul> -->
                {{--<ul class="flow-default" id="LAY_demo1"></ul>--}}
                <div id="" class="withdrawals-panel" v-for="val in order" style="border: none;">
                    <div class="groupby-img-panle" style="height: 140px;">
                        <a href="#"><img :src="val.supplyOrderGoods[0]['sku_image']"
                                         class="am-img-responsive" /></a>
                    </div>
                    <div class="groupby-info-panle">
                        {{--<h3><a href="#">@{{ val.ordername }}</a></h3>--}}
                        <p>金额：<span class="red2 bold">@{{ val.order_money }}</span> 元&nbsp; &nbsp;</p>
                        <p>名称：<span class="red2 bold">@{{ val.order_name }}</span> </p>
                        <p>发货状态：<span class="red2 bold">@{{ val.order_status_name }}</span> </p>
                        <p v-if="val.order_status != 1" style="word-wrap: normal;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">快递单号：@{{ val.supplyOrderGoods[0].delivery_no }}</p>
                        <p class="groupby-t-p">订单号：@{{ val.order_no }}</p>
                        <p>下单时间：@{{ val.create_time }}</p>
                        <p>
                            <a v-on:click="pay(val.order_no)" v-show="val.order_status == 0"
                               class="am-btn am-btn-danger am-btn-xs am-radius" style="border-radius: 50px;">立即支付</a>

                            <a v-on:click="orderComm(val.order_no)" class="am-btn am-btn-primary am-btn-xs am-radius" style="border-radius: 50px;">物流详情</a>
                        </p>
                    </div>
                </div>
                <li class="layui-flow-more" v-if="loading">加载中</li>
                <li class="layui-flow-more" v-if="loading==false">没有更多了</li>
            </div>
        </div>
        @include('Home.foot')
    </div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的订单',
            order: {

            },
            page: '', //总页数
            nowPage: 2, //本页
            loading: false, //异步加载时的限制
            bottomHight: 50, //滚动条到某个位置才触发时间
            type:''

        },
        methods: {
            handleScroll: function () {
                var rico = this
                // console.log(app.type);
                if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading ==
                    false) {
                    app.loading = true;
                    $.get("/home/index/my_order", {
                        '_token': '{{csrf_token()}}',
                        class: 'select',
                        page: app.nowPage + 1,
                        type:app.type
                    }, function (res) {
                        // for (var i = 0; i < res.data.data.length; i++) {
                        //     // console.log(res.data.data[i])
                        //     res.data.data[i].createtime = rico.formatDateTime(res.data.data[i]
                        //         .createtime)
                        //     if (res.data.data[i].couriertime) {
                        //         res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i]
                        //             .couriertime)
                        //     } else {
                        //         res.data.data[i].couriertime = ''
                        //     }
                        //     app.order.push(res.data.data[i]);
                        // }
                        app.nowPage++;
                        app.loading = false;
                    });
                }
            },

            //初始化 系统管理员列表
            initialize: function () {
                var rico = this
                var st = this.obtain('st');
                $.post("/home/index/my_order", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',status:st
                }, function (res) {
                    if (res.code) {
                        // app.pages = res.data
                        app.order = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        // for (var i = 0; app.order.length > i; i++) {
                        //     app.order[i].createtime = rico.formatDateTime(app.order[i].createtime)
                        //     if (res.data.data[i].couriertime) {
                        //         res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i]
                        //             .couriertime)
                        //     } else {
                        //         res.data.data[i].couriertime = ''
                        //     }
                        // }
                        // if(st == null){
                        // 	app.title = '全部订单';
                        // }else if(st == 1){
                        // 	app.title = '已发货订单';
                        // }else if(st == 2){
                        // 	app.title = '待发货订单';
                        // }else if(st == 3){
                        // 	app.title = '已完成订单';
                        // }
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            obtain:function (val) {

                var query = window.location.search.substring(1);

                var vars = query.split("&");

                for (var i=0;i<vars.length;i++) {

                    var pair = vars[i].split("=");

                    if(pair[0] == val){

                        return pair[1];

                    }

                }

            },
            class0: function (type) {
                var rico = this
                $.post("/home/member/myorder", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',status:type
                }, function (res) {
                    if (res.code) {
                        // app.pages = res.data
                        app.type = type;
                        app.order = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        for (var i = 0; app.order.length > i; i++) {
                            app.order[i].createtime = rico.formatDateTime(app.order[i].createtime)
                            if (res.data.data[i].couriertime) {
                                res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i]
                                    .couriertime)
                            } else {
                                res.data.data[i].couriertime = ''
                            }
                        }
                    } else {
                        layer.msg(res.data);
                    }
                });
            },

            formatDateTime: function (timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            },
            pag: function () {
                $.post("/home/member/myorder", {
                    '_token': '{{csrf_token()}}',
                    class: 'select'
                }, function (res) {
                    if (res.code) {

                        app.order = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },

            pay: function (orderNo) {
                window.location.href = "https://app.blkongjianzhan.com/home/index/order_details?order_no=" + orderNo + "&redirect_uri=" + "http://hcat.baoliy168.com/home/index/supply_order";

            },
            //订单详情
            orderComm: function (order_no) {
                window.location.href = "/home/index/supply_details?id=" + order_no;
            },
            //确认收货
            affirms: function (id) {
                var that = this;
                $.post("/home/member/myorder", {
                    '_token': '{{csrf_token()}}',
                    class: 'affirms',
                    id: id
                }, function (res) {
                    if (res.code) {
                        layer.msg(res.data);
                        that.initialize();
                    } else {
                        layer.msg(res.data);
                    }
                });
            }

        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })

    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }
    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }
    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }
    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }

    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
</script>

</html>